class Graph {
    //canvas元素ID
    elementId = "";
    //canvas element
    el = null;
    //canvas context
    ctx = null;
    //底图
    baseImg = "";
    //标注数据
    taggingData = null;
    //鼠标键盘事件
    kMEventNum = 1;

    //构造函数
    constructor(elementId) {
        let el = document.getElementById(elementId);
        if (el != null && el.tagName === "CANVAS") {
            this.elementId = elementId
            this.el = el
            this.ctx = el.getContext("2d")
        } else {
            window.console.error(`There is no canvas element ID named ${elementId}`)
        }
    }

    //初始化
    init() {
        this.loadCBaseMap("https://www.runoob.com/wp-content/uploads/2018/12/2255709523-5b74dd8eb033e_articlex.png")
        this.autoFixWH()
        this.registerMKEvent()
    }

    /*
        getter
    */
    get te() {
        return "this is atest"
    }

    /*
        setter
    */

    tes() {
        return this.el;
    }

    //绘制底图
    loadCBaseMap(imgUrl) {
        this.baseImg = new Image();
        this.baseImg.onload = () => {
            this.ctx.drawImage(this.baseImg, 0, 0);
        }
        this.baseImg.src = imgUrl;
    }

    //canvas自适应宽高
    autoFixWH() {
        this.el.width = this.baseImg.width
        this.el.height = this.baseImg.height
    }

    //鼠标键盘事件注册
    registerMKEvent() {
        this.el.addEventListener("mousedown", this.mouseDownDefaultEvent)
        this.el.addEventListener("mouseup", this.mouseUpDefaultEvent)
        this.el.addEventListener("mousemove", this.mouseMoveDefaultEvent)
        window.addEventListener("keydown", this.keyboardPressDefaultEvent)
        window.addEventListener("keyup", this.keyboardUpDefaultEvent)
    }

    //鼠标事件
    mouseDownDefaultEvent(e) {
        this.kMEventNum *= 257;
        window.console.log("mouse down")
    }

    //鼠标事件
    mouseUpDefaultEvent(e) {
        this.kMEventNum /= 257;
        window.console.log("mouse down")
    }

    //鼠标事件
    mouseMoveDefaultEvent(e) {
        // window.console.log(e)
    }

    //键盘事件
    keyboardPressDefaultEvent(e) {
        this.kMEventNum *= e.keyCode
        window.console.log("keyboard down")
    }

    //键盘事件
    keyboardUpDefaultEvent(e) {
        this.kMEventNum /= e.keyCode
        window.console.log("keyboard down")
    }


}

export default Graph;